import React from "react";
import {Center, View} from "native-base";
import {TouchableOpacity, StyleSheet} from "react-native";

export const ChineseItem = ({chineseNum,setChineseNum,setIpt,chinese,index}) => {
    function _radicals(){
        const arr = Array(35).fill(0);
        arr[index] = 1;
        setChineseNum(arr);
        setIpt(chinese);
    }
    return (
        <View>
            {chineseNum === 0 && (
                <TouchableOpacity
                    onPress={() => {
                        _radicals();
                    }}>
                    <Center style={styles.radicalsNum}>
                        {chinese}
                    </Center>
                </TouchableOpacity>
            )}
            {chineseNum === 1 && (
                <TouchableOpacity>
                    <Center
                        _text={{color: '#fff'}}
                        style={styles.radicalsNumS}
                    >
                        {chinese}
                    </Center>
                </TouchableOpacity>
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    radicalsNum: {
        width: 50,
        height: 50,
        borderWidth: 1,
        borderColor: '#000',
        borderRadius: 5,
        marginBottom: 10,
    },
    radicalsNumS: {
        width: 50,
        height: 50,
        borderWidth: 1,
        color: '#fff',
        backgroundColor: '#ffa501',
        borderColor: '#ffa501',
        borderRadius: 5,
        marginBottom: 10,
    },
})